import React,{PureComponent} from 'react';
import {connect} from 'react-redux';
import {ListA,ListWrapperC} from '../style';
import scientific from  '../../../icon/科研基地.png';
import {NavLink} from "react-router-dom";

class BaseShow extends PureComponent {

    render(){
        const data={

            bar:this.props.baseBar.toJS()
        };

        return(

         <ListA className='base' >
                    <div style={{width:'100%',height:'60px'}}> <h1 className='title'><img style={{width:'43px',height:'38px',padding:'0 10px 5px 0'}} src={scientific} alt='' />科研基地</h1></div>
             <ListWrapperC >   <NavLink  to={{pathname: '/ListPage', state: {url:data.bar.menu[0].menuUrl,bar:data.bar}}}>  <img className='img' src={data.bar.menu[0].reserved} alt='' /><div><h1 className='font'  >{data.bar.menu[0].menuValue}</h1></div></NavLink></ListWrapperC>
                    <ListWrapperC style={{width:'4%'}}/>
             <ListWrapperC> <NavLink  to={{pathname: '/ListPage', state: {url:data.bar.menu[1].menuUrl,bar:data.bar}}}><img className='img' src={data.bar.menu[1].reserved} alt=''  /><div><h1 className='font'>{data.bar.menu[1].menuValue}</h1></div></NavLink></ListWrapperC>
                    <ListWrapperC style={{width:'4%'}}/>
             <ListWrapperC> <NavLink  to={{pathname: '/ListPage', state: {url:data.bar.menu[2].menuUrl,bar:data.bar}}}><img className='img' src={data.bar.menu[2].reserved} alt=''/><div><h1  className='font'>{data.bar.menu[2].menuValue}</h1></div></NavLink></ListWrapperC>
                    <ListWrapperC style={{width:'4%'}}/>
             <ListWrapperC> <NavLink to={{pathname: '/ListPage', state: {url:data.bar.menu[3].menuUrl,bar:data.bar}}}><img className='img' src={data.bar.menu[3].reserved} alt=''/><div><h1 className='font'>{data.bar.menu[3].menuValue}</h1></div></NavLink></ListWrapperC>
                </ListA>

        )
    }
}
const mapState=(state)=>({
    baseBar:state.getIn(['home','baseBar'])
});
export default connect(mapState,null)(BaseShow);